react hooks

什么是 hooks ？

hooks 是 react v16.7.0 新增的特性。

hooks 有什么作用？

在 react 中组件的编写可以分为类组件和函数型组件，类组件有自己的状态 state，生命周期 lifecycle，而函数型组件一般做为无状态组件使用，自身是没有状态和生命周期的，通过 hooks 可以让函数型组件也拥有自身的状态和生命周期。

为什么要有 hooks ，hooks 是为了解决什么问题？

在开发的过程中，根据页面的展示效果和交互，会考虑各个组件的拆分，会将一些组件拆分成可复用的通用组件，这种可能就是 UI 组件，但随着需求的不断变更，原本的 UI 组件可能需求用到自身的状态或者是生命周期，以前可能需要将 UI 组件重新重构为类组件，用 hooks 的话可以解决这个问题。

hooks 引进后，使用函数式组件还是类组件？

官方是建议使用 hooks，即函数式组件，但由于各种调试工具，第三方库对 hooks 的支持还不是那么完善，所以对一些影响不大的组件可以使用。

useState

useState 可以为函数式组件带来 state，它接收一个用于初始 state 的值，返回一对变量

// count 数值
// setCount 函数，用于改变 count 的值
const [count, setCount] = useState(0);

useState 是可以多次调用的

const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');

useEffect

使用 useEffect 可以在组件中执行一些带有副作用的操作，而之前会把这些副作用的函数写在生命周期函数钩子里，比如 componentDidMount 。

useEffect(() => {
  api.getData();
});